<template>
  <!-- 图片批量上传
      @param {Array} imgArr - 需要上传的证件数组
      @param {Boolean} disabled - 是否为禁用上传
      @param {Number} type - ocr识别类型 1:司机 2:车辆 3:混合 4:货主
      @param {Function} recognize-success - 证件识别回调函数
     -->
  <app-batch-upload
    ref="batchUpload"
    v-model="imgArr"
    :type="3"
    @recognize-success="recognizeSuccess"
  />
  <el-button
    @click="onSubmit"
  >
    获取
  </el-button>
  <el-button
    @click="rest"
  >
    重置
  </el-button>
  <el-button
    @click="validate"
  >
    校验
  </el-button>
</template>
<script setup>

const imgArr = ref([
  {
    key: 'cardFront',
    title: '身份证头像面',
    src: '',
    required: true // 是否必填
  },
  {
    key: 'cardBack',
    title: '身份证国徽面',
    src: ''
  },
  {
    key: 'driverLicense',
    title: '驾驶证正本',
    src: ''
  },
  {
    key: 'driverBack',
    title: '驾驶证副本',
    src: ''
  },
  {
    key: 'qualificationLicense',
    title: '从业资格证',
    src: ''
  },
  {
    key: 'drivingFront',
    title: '行驶证正面',
    src: ''
  },
  {
    key: 'drivingBack',
    title: '行驶证副本',
    src: ''
  },
  {
    key: 'roadLicense',
    title: '道路运输证正面',
    src: ''
  },
  {
    key: 'handCar',
    title: '挂车行驶证',
    src: ''
  },
  {
    key: 'handRoadTransport',
    title: '挂车道路运输证',
    src: ''
  }
])

// 证件识别响应
const recognizeSuccess = (para) => {
  console.log(para)
}

// 获取图片
const batchUpload = ref(null)
const onSubmit = () => {
  console.log(batchUpload.value?.getValue())
}

// 重置
const rest = () => {
  batchUpload.value?.rest()
}

// 校验
const validate = async () => {
  await batchUpload.value?.validate()
}

</script>

<style scoped lang='scss'>

</style>
